

<template>

  <div class="edp_page">
    <van-nav-bar
        title="详情页"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
    />
    <van-tabs v-model:active="active" @click-tab="onClickTab" color="#191919">
      <van-tab title="期望诉求"></van-tab>
<!--      <van-tab title="基本信息"></van-tab>-->
<!--      <van-tab title="过往信息"></van-tab>-->
      <van-tab title="经纪人评价"></van-tab>
    </van-tabs>
    token={{utilStr.router_query('token')}}
    <div class="edp_body">
<!--      <div class="laiyuan" >-->
<!--        <div class="laiyuan1">-->
<!--          <img src="@/assets/appimg/laiyuan.png" style="height: 20px;width: 20px;">-->
<!--          <span class="laiyuan_text">来源于平台线下｜C端</span>-->
<!--        </div>-->
<!--        <div class="laiyuan_text">意向度 <span style="font-size: 18px;">S</span></div>-->
<!--      </div>-->
      <div class="sqnr" ref="targetRef1">
<!--        <div class="hetongstr">-->
<!--          <div>发起定金合同</div>-->
<!--        </div>-->
        <div class="sqbt">
          <div class="sqbt1">
            <div class="sqbt1_child1">家员私厨</div>
            <div class="sqbt1_child2">5&保姆/保洁</div>
          </div>
          <div class="xz">
            <div class="xz_child1">6000-8000</div>
            <div class="xz_child2">/月*14薪</div>
          </div>
        </div>
        <div style="font-size: 16px;color:#191919;margin-left: 10px;margin-top: 10px">
          住家｜8-20点 24小时
        </div>
        <div class="line"></div>
        <div class="dingwei">
          <img src="@/assets/appimg/dingwei.png">
          <span style="font-size: 14px;color: #191919;">北京市海淀区</span>
        </div>
        <div class="qiuzhiyixiang_title">工作内容</div>
        <div class="gznr">
          <span class="gznr_child1">主要工作：</span>
          <span
              class="gznr_child2">接孩子、家庭五口一日三餐、整理房间、清洁房间、开车接孩子上下学、剩下就是产品文档了。接孩子、家庭五口一日三餐、整理房间、清洁房间、开车剩下就是产品文档了。</span>
        </div>
        <div class="gznr">
          <span class="gznr_child1">辅助工作：</span>
          <span
              class="gznr_child2">接孩子、家庭五口一日三餐、整理房间、清洁房间、开车接孩子上下学、剩下就是产品文档了。接孩子、家庭五口一日三餐、整理房间、清洁房间、开车剩下就是产品文档了。</span>
        </div>
        <div class="qiuzhiyixiang_title">时间范围</div>
        <div class="gznr">
          <span class="gznr_child1">面试时间：</span>
          <span
              class="gznr_child2">2025.07.02</span>
        </div>
        <div class="gznr">
          <span class="gznr_child1">入户时间：</span>
          <span
              class="gznr_child2">2025.07.02</span>
        </div>
        <div class="qiuzhiyixiang_title">福利</div>
        <div style="height: 10px;width: 100%;"></div>
        <div class="fuli">
          <div class="fulic_child" v-for="(item,index) in 20">{{ item }}</div>
        </div>
<!--        <div class="qtfuli">其他福利</div>-->
        <div class="qiuzhiyixiang_title">其他诉求</div>
        <div class="zwjs_nr">
          <div style="margin-top: 10px;margin-bottom: 10px;"><span
              style="font-weight: bold;color:#191919; font-size: 14px;">
            服务100以上位雇主 | 5-10年经验
          </span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">性别要求:</span> <span
              style="font-size: 14px;font-weight: normal;">x</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">年龄要求：</span><span
              style="font-size: 14px;font-weight: normal;">x</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">意向籍贯：</span><span
              style="font-size: 14px;font-weight: normal;">xxx</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">其他技能：</span><span
              style="font-size: 14px;font-weight: normal;">xxx</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">其他要求：</span><span
              style="font-size: 14px;font-weight: normal;">xxx</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">禁忌内容：</span><span
              style="font-size: 14px;font-weight: normal;">xxx</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">学历要求：</span><span
              style="font-size: 14px;font-weight: normal;">x</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">语言要求：</span><span
              style="font-size: 14px;font-weight: normal;">xxx</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">星座要求：</span><span
              style="font-size: 14px;font-weight: normal;">xxx</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">属相要求：</span><span
              style="font-size: 14px;font-weight: normal;">xxx</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">民族：</span><span
              style="font-size: 14px;font-weight: normal;">xxx</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">宗教信仰：</span><span
              style="font-size: 14px;font-weight: normal;">xxx</span></div>
        </div>

      </div>
<!--      <div class="sqnr" ref="targetRef3">-->
<!--        <div class="qiuzhiyixiang_title">过往信息</div>-->
<!--        <div class="gwxx1">-->
<!--          <div class="gwxx1_child1">-->
<!--            <img src="@/assets/appimg/add_btn.png" style="height: 20px;width: 20px;">-->
<!--            <span style="margin-left: 5px;">曾聘请过几位服务人员：</span>-->
<!--          </div>-->
<!--          <div class="gwxx1_child2">A:3位</div>-->
<!--        </div>-->
<!--        <div style="height: 20px;"></div>-->
<!--        <div class="gwxx1">-->
<!--          <div class="gwxx1_child1">-->
<!--            <img src="@/assets/appimg/add_btn.png" style="height: 20px;width: 20px;">-->
<!--            <span style="margin-left: 5px;">您认可的服务人员在哪方面最吸引你：</span>-->
<!--          </div>-->
<!--          <div class="gwxx1_child2">A:3位</div>-->
<!--        </div>-->
<!--        <div style="height: 20px;"></div>-->
<!--        <div class="gwxx1">-->
<!--          <div class="gwxx1_child1">-->
<!--            <img src="@/assets/appimg/add_btn.png" style="height: 20px;width: 20px;">-->
<!--            <span style="margin-left: 5px;">与前任服务人员解除合作的原因是什么：</span>-->
<!--          </div>-->
<!--          <div class="gwxx1_child2">A:3位</div>-->
<!--        </div>-->
<!--        <div style="height: 20px;"></div>-->
<!--        <div class="gwxx1">-->
<!--          <div class="gwxx1_child1">-->
<!--            <img src="@/assets/appimg/add_btn.png" style="height: 20px;width: 20px;">-->
<!--            <span style="margin-left: 5px;">分别在那几个结构聘请过服务人员</span>-->
<!--          </div>-->
<!--          <div class="gwxx1_child2">A:3位</div>-->
<!--        </div>-->
<!--        <div style="height: 20px;"></div>-->
<!--        <div class="gwxx1">-->
<!--          <div class="gwxx1_child1">-->
<!--            <img src="@/assets/appimg/add_btn.png" style="height: 20px;width: 20px;">-->
<!--            <span style="margin-left: 5px;">你最忌讳服务人员的那些行为：</span>-->
<!--          </div>-->
<!--          <div class="gwxx1_child2">A:3位</div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="sqnr" ref="targetRef4">
        <div class="qiuzhiyixiang_title">经纪人评价</div>
        <div style="font-size: 14px;font-weight: normal;margin-left: 10px;margin-top: 10px;">
          服务百岁老人真的福气呀，而且老人很喜欢现有白班阿姨，待人亲和、乐观，但新阿姨入府需要有耐心才好被老人认可;XXXXXXXXX整体劳务内容与报酬不错;
        </div>
      </div>
    </div>

<!--    <div class="foot_box">-->
<!--      <div class="tuidan" v-if="buttonShow">退单</div>-->
<!--      <div class="tuidan" v-if="buttonShow">记录</div>-->
<!--      <div class="tuidan2" v-if="buttonShow&&myChannel!=null">待分享</div>-->
<!--      <div class="tuidan2" v-if="buttonShow">完善信息</div>-->
<!--      <div class="dadianhua" v-if="buttonShow">打电话</div>-->
<!--      <div class="buttons">-->
<!--        <div class="hetong" v-if="buttonShow2" @click="clickJieDan">接单</div>-->
<!--        <div class="hetong" v-if="buttonShow">发起委托协议</div>-->
<!--        <div class="hetong2" v-if="buttonShow">-->
<!--          <div>委托协议</div>-->
<!--          <div class="dqs">待签署</div>-->
<!--        </div>-->
<!--        <div class="hetong" v-if="buttonShow">发起定金合同</div>-->
<!--        <div class="hetong2" v-if="buttonShow">-->
<!--          <div>定金合同</div>-->
<!--          <div class="dqs">待签署</div>-->
<!--        </div>-->
<!--        <div class="hetong" v-if="buttonShow">缴纳定金</div>-->
<!--        <div class="hetong2" v-if="buttonShow">-->
<!--          <div>缴纳定金</div>-->
<!--          <div class="dqs">待支付</div>-->
<!--        </div>-->
<!--        <div class="hetong" v-if="buttonShow">发起合作合同</div>-->
<!--        <div class="hetong2" v-if="buttonShow">-->
<!--          <div>合作合同</div>-->
<!--          <div class="dqs">待签署</div>-->
<!--        </div>-->
<!--        <div class="hetong2" v-if="buttonShow">-->
<!--          <div>服务费尾款</div>-->
<!--          <div class="dqs">待支付</div>-->
<!--        </div>-->
<!--        <div class="hetong" v-if="buttonShow">代收薪资</div>-->
<!--        <div class="hetong2" v-if="buttonShow">-->
<!--          <div>代收薪资</div>-->
<!--          <div class="dqs">待支付</div>-->
<!--        </div>-->
<!--        <div class="hetong2" v-if="buttonShow">-->
<!--          <div>代收薪资</div>-->
<!--          <div class="dqs">本期付清</div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <DialogCancelConfirm v-model:visible="isDialogVisible"-->
<!--               :money="100"-->
<!--               @onClickCancel="onClickCancel"-->
<!--               @onClickConfirm="onClickConfirm"-->
<!--    />-->
<!--    <DialogConfirm v-model:visible="isDialogVisible"-->
<!--                         :money="100"-->
<!--                         @onClickCancel="onClickCancel"-->
<!--                         @onClickConfirm="onClickConfirm"-->
    />

  </div>

</template>
<script setup lang="ts">
import {Ref, ref} from "vue";
import {useRouter} from 'vue-router'
import utilStr from '../../util/utilStr';
import faqidingjinhetong from '@/assets/appimg/faqidingjinhetong.png';
import addimg from '@/assets/appimg/add_btn';
import {showToast} from "vant";
import DialogCancelConfirm from "@/components/dialog/DialogCancelConfirm.vue";
import DialogConfirm from "@/components/dialog/DialogConfirm.vue";
import { showDialog } from 'vant';
const router = useRouter()
function onClickLeft() {
  if (null==window.MyChannel){
    router.back()
  }else{
    var pagestr={
      type:1,
      data:"退出吧"
    }
    window.MyChannel.postMessage(JSON.stringify(pagestr));
  }
}


const buttonShow = ref(false);
const buttonShow2 = ref(true);
////////////置顶和tab切换////////////////////////
const targetRef1 = ref<HTMLElement | null>(null);
const targetRef2 = ref<HTMLElement | null>(null);
const targetRef3 = ref<HTMLElement | null>(null);
const targetRef4 = ref<HTMLElement | null>(null);
const targetRefs = [targetRef1,  targetRef4];


const active = ref(0);

function onClickTab() {
  // showToast("aaa:" + active.value);
  const targetRef = targetRefs[active.value];
  targetRef.value.scrollIntoView({behavior: 'smooth'});
}
function onClickTab2() {
  alert(myChannel)
  console.log("aaa="+myChannel!=null)
}

console.log(utilStr);  // 输出 6W9jS0
const  isDialogVisible= ref(false);
function  clickJieDan(){
  isDialogVisible.value = !isDialogVisible.value;
  // print('isDialogVisible=',isDialogVisible.value)
  // showDialog({
  //   title: '标题',
  //   message: '代码是写出来给人看的，附带能在机器上运行。',
  //   theme: 'round-button',
  // }).then(() => {
  //   alert('aaaa')
  // });

}

function onClickCancel(dilog_visible) {
   console.log('1dilog_visible=',dilog_visible);
  isDialogVisible.value = !isDialogVisible.value;
}
function onClickConfirm(dilog_visible) {
  console.log('2dilog_visible=',dilog_visible);
  isDialogVisible.value = !isDialogVisible.value;
  router.push(
      {path:'/zf',query:{money:30}}
  )
}
</script>
<style scoped lang="less">
::v-deep(.van-tabs__line) {
  background-color: #ff0000 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}


.edp_page {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: #D1D3D5;

  .edp_body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    padding-bottom: 100px;
    background-image: url('@/assets/appimg/guzhu_bg.png');

    .laiyuan {
      margin-top: 10px;
      padding-top: 10px;
      margin-left: 20px;
      margin-right: 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .laiyuan1 {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .laiyuan_text {
        color: white;
        font-size: 16px;
        font-weight: bold;
        margin-left: 5px
      }
    }

    .sqnr {
      background-color: red;
      margin: 10px;
      padding-bottom: 10px;
      border-radius: 3px;
      background-color: white;
    }

    .hetongstr {
      display: flex;
      flex-direction: row;
      justify-content: end;

      & > div {
        font-size: 14px;
        color: #191919;
        background-color: #947031B2;
        border-top-right-radius: 3px;
        border-bottom-left-radius: 5px;
        padding-right: 5px;
        padding-left: 5px;
        padding-top: 3px;
        padding-bottom: 3px;
      }
    }

    .sqbt {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .sqbt1 {
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-left: 10px;

        .sqbt1_child1 {
          color: #191919;
          font-size: 25px;
          font-weight: bold;
        }

        .sqbt1_child2 {
          font-size: 14px;
          font-weight: normal;
          color: #191919;
        }
      }

      .xz {
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: end;
        color: #B51C21;

        .xz_child1 {
          font-weight: bold;
          font-size: 16px;
        }

        .xz_child2 {
          font-size: 12px;
        }
      }
    }

    .line {
      box-sizing: border-box;
      height: 1px;
      background-color: #B5B5B5;
      margin-left: 8px;
      margin-top: 8px;
      margin-right: 10px;
    }

    .dingwei {
      display: flex;
      flex-direction: row;
      margin-top: 10px;
      padding-left: 10px;

      img {
        width: 20px;
        height: 20px;
      }
    }

    .gznr {
      margin-top: 8px;
      padding-left: 10px;
      padding-right: 10px;

      .gznr_child1 {
        font-size: 14px;
        font-weight: bold;
        color: #191919;
      }

      .gznr_child2 {
        font-size: 14px;
        color: #191919;
      }
    }

    .fuli {
      display: grid;
      grid-template-columns:repeat(4, 1fr);
      gap: 10px;

      .fulic_child {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: #191919;
        font-weight: normal;
        font-size: 14px;
      }
    }

    .qtfuli {
      display: flex;
      flex-direction: row;
      color: #191919;
      font-weight: normal;
      font-size: 14px;
      margin-left: 10px;
    }

    .zwjs_nr {
      font-size: 14px;
      color: #191919;
      margin-top: 5px;
      padding-left: 8px;
    }

    .gwxx1 {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      padding-left: 10px;

      .gwxx1_child1 {
        display: flex;
        flex-direction: row;
        font-size: 14px;
        color: #191919;
      }

      .gwxx1_child2 {
        background-color: #FFB7B9;
        height: 45px;
        border-radius: 3px;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 10px;
        font-size: 14px;
      }
    }

  }

  .qiuzhiyixiang_title {
    box-sizing: border-box;
    font-size: 16px;
    color: black;
    font-weight: bold;
    background: linear-gradient(to right, #F89596, #FFFFFF);
    //background-image: url('@/assets/appimg/biaoti.png');
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100px;
    margin-top: 20px;
  }

  .foot_box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    height: 70px;

    .tuidan {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #191919;
      width: 40px;
      height: 30px;
      font-size: 14px;
    }

    .tuidan2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #191919;
      width: 40px;
      height: 30px;
      font-size: 14px;
    }

    .dadianhua {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background-color: #FFF9F9; /* 填充颜色 */
      border: 1px solid #FF4142; /* 边框颜色和宽度 */
      border-radius: 50px; /* 圆角大小 */
      width: 70px; /* 宽度可自定义 */
      height: 40px;
      text-align: center;
      font-family: sans-serif;
      color: #FF4142;
      font-size: 14px;
      font-weight: bold;
      margin-left: 6px;
    }

    .buttons {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      flex: 1;

      .hetong {
        margin-left: 8px;
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: #FF4142; /* 填充颜色 */
        border: 1px solid #FF4142; /* 边框颜色和宽度 */
        border-radius: 50px; /* 圆角大小 */
        width: 80px; /* 宽度可自定义 */
        height: 40px;
        text-align: center;
        font-family: sans-serif;
        color: white;
        font-size: 14px;
        font-weight: bold;
      }

      .hetong2 {
        margin-left: 8px;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #FF4142; /* 填充颜色 */
        border: 1px solid #FF4142; /* 边框颜色和宽度 */
        border-radius: 50px; /* 圆角大小 */
        width: 80px; /* 宽度可自定义 */
        height: 40px;
        text-align: center;
        font-family: sans-serif;
        color: white;
        font-size: 14px;
        font-weight: bold;

        .dqs {
          font-size: 12px;
          font-weight: normal;
        }
      }
    }
  }
}

</style>